<template>
  <div 
    class="feature-card" 
    @click="onClick"
    :class="{ 'feature-card-router': to }"
  >
    <div class="card-icon">
      <template v-if="isEmoji(icon)">
        <span class="emoji-icon">{{ icon }}</span>
      </template>
      <template v-else>
        <van-icon :name="icon" :size="24" :color="iconColor" />
      </template>
    </div>
    <div class="card-content">
      <h3 class="card-title">{{ title }}</h3>
      <p class="card-description">{{ description }}</p>
    </div>
    <van-icon name="arrow-right" class="card-arrow" size="16" color="#999" />
  </div>
</template>

<script setup>
import { Icon } from 'vant';
import { useRouter } from 'vue-router';

const router = useRouter();

// 定义props
const props = defineProps({
  // 图标名称或表情符号
  icon: {
    type: String,
    required: true
  },
  // 图标颜色
  iconColor: {
    type: String,
    default: '#409eff'
  },
  // 卡片标题
  title: {
    type: String,
    required: true
  },
  // 卡片描述
  description: {
    type: String,
    default: ''
  },
  // 点击是否有涟漪效果
  ripple: {
    type: Boolean,
    default: true
  },
  // 路由跳转地址
  to: {
    type: String,
    default: ''
  }
});

// 定义事件
const emit = defineEmits(['click']);

// 判断是否为表情符号
const isEmoji = (str) => {
  // 简单判断是否包含emoji字符（Unicode范围）
  return /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F1E0}-\u{1F1FF}]/u.test(str);
};

// 点击事件处理
const onClick = () => {
  if (props.to) {
    router.push(props.to);
  }
  emit('click');
};
</script>

<style scoped>
.feature-card {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.feature-card:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f7ff;
  border-radius: 12px;
  margin-right: 16px;
  flex-shrink: 0;
}

.card-content {
  flex: 1;
  min-width: 0;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px 0;
  line-height: 1.4;
}

.card-description {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-arrow {
  margin-left: 12px;
  flex-shrink: 0;
}

/* 表情符号图标样式 */
.emoji-icon {
  font-size: 24px;
  line-height: 1;
}

/* 涟漪效果 */
.feature-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.05);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.feature-card:active::before {
  width: 300px;
  height: 300px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .feature-card {
    padding: 14px 16px;
  }
  
  .card-icon {
    width: 40px;
    height: 40px;
    margin-right: 12px;
  }
  
  .van-icon {
    font-size: 20px !important;
  }
  
  .card-title {
    font-size: 15px;
  }
  
  .card-description {
    font-size: 13px;
  }
}

/* 不同主题色的卡片样式 */
.feature-card.theme-primary .card-icon {
  background-color: #e6f4ff;
}

.feature-card.theme-success .card-icon {
  background-color: #f0f9ff;
}

.feature-card.theme-warning .card-icon {
  background-color: #fff7e6;
}

.feature-card.theme-danger .card-icon {
  background-color: #fff2f0;
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
  .feature-card {
    background-color: #1e1e1e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  
  .card-title {
    color: #f0f0f0;
  }
  
  .card-description {
    color: #b0b0b0;
  }
  
  .card-arrow {
    color: #707070;
  }
  
  .feature-card::before {
    background-color: rgba(255, 255, 255, 0.05);
  }
  
  .feature-card.theme-primary .card-icon {
    background-color: rgba(64, 158, 255, 0.1);
  }
  
  .feature-card.theme-success .card-icon {
    background-color: rgba(102, 177, 62, 0.1);
  }
  
  .feature-card.theme-warning .card-icon {
    background-color: rgba(255, 153, 0, 0.1);
  }
  
  .feature-card.theme-danger .card-icon {
    background-color: rgba(255, 73, 73, 0.1);
  }
}
</style>